<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex1</title>
    <style>
        /*CSS初始化*/
        body{
            margin: 0;
        }
        header{
            background: purple;
            height: 100px;
        }
        h1{
            text-align: center;
            color: white;
            line-height: 100px;
            margin: 0;
        }
        article{
            padding: 10px;
            margin: 10px;
            background: aqua;
        }
        /* Flex  内容 */
        section{
            display: flex;
        }
        article{

            /*
            1表示一个无单位的比例值，表示每个 flex 项沿主轴的可用空间大小
            每个item的宽至少200px
            */
            flex: 1 200px;
        }
        article:nth-of-type(3){
            /*
            flex-grow :无单位的比例值，表示每个 flex 项沿主轴的可用空间大小
            flex: 1 200px; 是下面的代码简写
            */
            flex-grow: 4;
            flex: 400px
        }
    </style>
</head>
<body>
<header>
    <h1>Sample 弹性盒子  example</h1>
</header>

<section>
    <article>
        <h2>First article</h2>

        <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
    </article>

    <article>
        <h2>Second article</h2>

        <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
    </article>

    <article>
        <h2>Third article</h2>

        <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>

        <p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
    </article>

</section>
</body>
</html>